import React, {Component} from 'react';
import {
    Text,
    View,
    StyleSheet,
    Image,
    TouchableOpacity,
    KeyboardAvoidingView
} from 'react-native';
import {scaleSize} from '../../utils/screen';
import FontText from '../components/FontText';
import { i18n } from '../../i18n';
import InputItem from '../components/InputItem';
import Switch from '../components/Switch';
export default class CreditEmail extends Component {
    constructor(props){
        super(props);
        this.state = {
            checked:true
        }
    }
    render() {
        let {checked} = this.state;
        return (
            <View style = {styles.container}>
                <KeyboardAvoidingView behavior='padding' keyboardVerticalOffset = {50} style = {styles.creditForm}>
                    <View style = {styles.formLine}>
                        <View style = {[styles.inputView,{width:scaleSize(400)}]}>
                            <Image style = {styles.userIcon} source = {require("../../access/imgs/costom_user_icon.png")} />
                            <InputItem placeholder = {'first name'} style = {styles.input} />
                        </View>
                        <View style = {[styles.inputView,{width:scaleSize(400)}]}>
                            <InputItem placeholder = {'last name'} style = {styles.input} />
                        </View>
                    </View>
                    <View style = {[styles.inputView,{marginTop:scaleSize(20)}]}>
                        <Image style = {styles.emailIcon} source = {require("../../access/imgs/custom_email_icon.png")} />
                        <InputItem placeholder = {'Email me my recript and ...'} style = {styles.input} />
                    </View>
                    <View style = {styles.checkView}>
                        <Switch 
                            checked = {checked} 
                            width = {scaleSize(70)}
                            activeColor = {"#cfa972"}
                            onPress = {(ncheck)=>this.setState({checked:ncheck})} defaultColor = {"#909090"} />
                        <View style = {styles.checkTips}> 
                            <FontText style = {styles.m1} font = {'medium'} >Free Stuff</FontText>
                            <FontText style = {styles.m2} font = {'light'} >Email me my recript and ...</FontText>
                        </View>
                    </View>
                    <View style = {styles.doneView}>
                        <TouchableOpacity
                            style = {styles.doneBtn}
                            >
                            <FontText style = {styles.done} font = {'medium'}>{i18n.t("btns.done")}</FontText>
                        </TouchableOpacity>
                    </View>
                </KeyboardAvoidingView>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        alignItems:"center",
        backgroundColor: "#fff",
        justifyContent:"center"
    },
    creditForm:{
        width:scaleSize(820)
    },
    formLine:{
        flexDirection:"row",
        justifyContent:"space-between"
    },
    inputView:{
        height:scaleSize(100),
        backgroundColor: "#f8f8f8",
        paddingHorizontal:scaleSize(18),
        alignItems:"center",
        flexDirection:"row"
    },
    input:{
       paddingHorizontal:scaleSize(18)
    },
    userIcon:{
        width:scaleSize(50),
        height:scaleSize(48)
    },
    emailIcon:{
        width:scaleSize(50),
        height:scaleSize(36)
    },
    checkView:{
        flexDirection:"row",
        marginTop:scaleSize(60),
    },
    checkTips:{
        paddingLeft:scaleSize(30),
        height:scaleSize(80),
        justifyContent:"space-between"
    },
    m1:{
        color:"#505050",
        fontSize:scaleSize(36)
    },
    m2:{
        color:"#505050",
        fontSize:scaleSize(24)
    },
    doneView:{
        marginTop:scaleSize(200),
        alignItems:"center"
    },
    doneBtn:{
        height:scaleSize(80),
        width:scaleSize(210),
        backgroundColor: "#fd265d",
        justifyContent:"center",
        alignItems:"center",
        borderRadius:scaleSize(40)
    },
    done:{
        color:"#fff",
        fontSize:scaleSize(30)
    }
})